<template>
  <!-- 分页组件 -->
  <el-pagination
    class="pagination"
    v-if="pagination"
    :current-page="currentPage"
    :page-size="pagination.pageSize"
    :page-sizes="pageSizes"
    :total="pagination.totalRecords"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>

<script>
  export default {
    name: 'pagination',
    props: {
      pagination: {
        type: Object,
        require: false
      },
      pageSizes: {
        type: Array,
        default () {
          return [2, 10, 20, 30, 50]
        }
      }
    },
    data () {
      return {
        totalCount: 0,
        pageSize: null,
        currentPage: 1
      }
    },
    methods: {
      handleSizeChange (val) {
        // 每页条数
        this.pagination.pageSize = val
        this.pagination.callback({
          pageNum: this.pagination.currentPage,
          pageSize: val
        })
      },
      handleCurrentChange (val) {
        // 当前页
        this.pagination.currentPage = val
        this.pagination.callback({
          pageNum: val,
          pageSize: this.pagination.pageSize
        })
      }
    }
  }
</script>
